<template>
	<view class="content">
		<!-- <u-sticky> -->
			<!-- 搜索框 -->
			<view class="header paddinglr ffffff" :style="{paddingTop:systemBarHeight+'rpx'}">
				<view class="searchBox">
					<!-- <view class="searchBox" @click="goSearch"> -->
					<u-icon name="search" color="rgba(202, 202, 202, 1)" size="22"></u-icon>
					<input class="searchInput" placeholder-class="searchPlaceholder" type="text" placeholder="搜索关键字"
						v-model="keyword" confirm-type="search" @confirm="init">
				</view>
			</view>
			<!-- tab栏 -->
			<view class="paddinglr ffffff" style="margin-left: -15rpx;">
				<u-tabs :list="tabList" @click="change" lineColor="rgba(243, 39, 28, 1)" :activeStyle="{
			    color: '#000000',
			    fontWeight: 800,
			    transform: 'scale(1.05)'}" :inactiveStyle="{
			    color: '#666666',
			    transform: 'scale(1)'
			}"></u-tabs>
			</view>
		<!-- </u-sticky> -->
		<!-- tab内容 -->
		<view class=" paddinglr">
			<!-- 导航栏 -->
			<view class="brief margin_top flexbetween">
				<scroll-view class="scroll-view_H" scroll-x>
					<view class="flexleft">
						<view :class="index==active?'xuanzhong margin_right2':'weixuanzhong margin_right2'"
							v-for="(item,index) in tabList[tabActive].childList" :key="index" @click="changeNav(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="margin_top flexbetween flex_wrap ">
				<view class="dayShop margin_bottom3" v-for="item in list.data" :key="item.id"
					@click="goServiceInfo(item.id)">
					<view class="imgBox">
						<image :src="item.image_text" mode="widthFix"></image>
					</view>
					<view class="padding">
						<view class="text_c" style="color: #F3271C;">￥{{item.price}}</view>
					</view>
					<view class="mainpaddingg2 flexbetween">
						<view class="flexleft">
							<view class="headimg">
								<image :src="item.user.avatar" mode="widthFix"></image>
							</view>
							<view class="xiaohui">{{item.user.nickname}}</view>
						</view>
						<view class="trade" v-show="item.service_state">营业中</view>
						<view class="rest" v-show="!item.service_state">休息中</view>
					</view>

				</view>
			</view>
			<view class="flexcenter placeholderBoxTop" v-if="!list.data.length">
				<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				active: 0,
				tabActive: 0,
				tabList: [{
					name: '全部',
					childList: []
				}, {
					name: '天问',
					childList: []
				}, {
					name: '天心',
					childList: []
				}, {
					name: '天养',
					childList: []
				}, {
					name: '天聊',
					childList: []
				}, {
					name: '天鉴',
					childList: []
				}, {
					name: '天融',
					childList: []
				}],
				systemBarHeight: "",
				page: 1,
				list: {
					data: []
				},
				keyword: "",
				isLoad: true,
			}
		},
		watch: {
			tabActive() {
				this.active = 0
				this.page = 1
				this.init()
			}
		},
		onLoad() {
			this.systemBarHeight = getApp().globalData.systemBarHeight * 2 + 40
			console.log(this.systemBarHeight);
			this.getHomeInit()
		},
		onShow() {
			if (!this.isLoad) {
				this.init()
			}
		},
		methods: {
			getHomeInit() {
				httpRequest.request("/api/index/index", "GET", {}).then(res => {
					this.dataAll = res.data
					this.tabList[1].childList = res.data.service_tags.tags1 //天问子标签
					this.tabList[2].childList = res.data.service_tags.tags2 //天心子标签
					this.tabList[3].childList = res.data.service_tags.tags3 //天养子标签
					this.tabList[4].childList = res.data.service_tags.tags4 //天聊子标签
					this.tabList[5].childList = res.data.service_tags.tags5 //天鉴子标签
					this.tabList[6].childList = res.data.service_tags.tags6 //天融子标签
					this.init()
					this.isLoad = false
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {}
				let url = ""
				// 服务类别:1=天问,2=天心,3=天养,4=天聊,5=天鉴,6=天融
				data = {
					service_type: this.tabActive != 0 ? this.tabActive : "",
					service_tags_id: this.tabActive != 0 ? this.tabList[this.tabActive].childList[this.active].id : "",
					keyword: this.keyword,
					page: page || 1
				}
				url = "/api/service/getlist"
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changeNav(index) { //导航栏切换
				this.active = index
				this.init()
			},
			change(e) { //tab栏切换
				this.tabActive = e.index
				// this.init()
			},
			goMessage() { //消息列表
				uni.navigateTo({
					url: "/pages/message/message"
				})
			},
			goServiceInfo(id) { //服务详情
				uni.navigateTo({
					url: "/pages_index/serviceInfo?id=" + id
				})
			},
			goSearch() { //搜索商品
				uni.navigateTo({
					url: "/pages/index/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.trade {
		background: rgba(19, 196, 99, .1);
		border-radius: 20rpx 0rpx 0rpx 20rpx;
		padding: 7rpx 25rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #13C463;
	}

	.rest {
		background: rgba(255, 138, 2, .1);
		border-radius: 20rpx 0rpx 0rpx 20rpx;
		padding: 7rpx 25rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8A02;
	}

	.headimg {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		margin-right: 12rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.xiaohui {
		width: 130rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 24rpx;
		color: #333333;
	}

	.mainpaddingg2 {
		padding: 0 0 30rpx 30rpx;
	}

	.content {
		padding-bottom: 100rpx;
	}

	.backFA {
		background-color: #FAFAFA;

	}

	// 搜索框
	.header {
		// margin-top: 96rpx;
		display: flex;
		justify-content: space-between;
	}

	.searchBox {
		padding: 18rpx 30rpx;
		background: #F3F3F3;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;

		.searchInput {
			margin-left: 20rpx;
			flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}

		.searchPlaceholder {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #C5C5C5;
		}
	}

	.weixuanzhong {
		padding: 10rpx 35rpx;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		white-space: nowrap;
	}

	.xuanzhong {
		padding: 10rpx 35rpx;
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #F3271C;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
		white-space: nowrap;
	}

	// 天商
	.dayShop {
		margin-bottom: 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;

		.imgBox {
			width: 330rpx;
			height: 330rpx;
			border-radius: 11rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>